<!DOCTYPE html>
<html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-0 vector-toc-not-available vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-0 skin-theme-clientpref-day vector-sticky-header-enabled" lang="de" dir="ltr"><head>
<meta charset="UTF-8">
<title>Unobtrusive JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./_res_/favicon.png">
<link rel="canonical" href="https://de.wikipedia.org/wiki/Unobtrusive_JavaScript"> <link href="./_mw_/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.wikimediamessages.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link href="./_mw_/ext.gadget.citeRef.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.defaultPlainlinks.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonHide.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonLayout.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonStyle.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiDarkmode.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiResponsive.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.specialSearch.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./_mw_/site.styles.css">
<link rel="stylesheet" type="text/css" href="./_mw_/noscript.css">
<link rel="stylesheet" type="text/css" href="./_res_/footer.css">
<link rel="stylesheet" type="text/css" href="./_res_/vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Unobtrusive_JavaScript rootpage-Unobtrusive_JavaScript skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Unobtrusive JavaScript</span></h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="contentSub">
<div id="mw-content-subtitle"></div>
</div>
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="de" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="de" dir="ltr"><p><b>Unobtrusive JavaScript</b> (wörtl. <i>unaufdringliches JavaScript</i>, auch: <i><a href="Barrierefreiheit" title="Barrierefreiheit">barrierefreies</a> JavaScript</i>) ist eine bestimmten Prinzipien verpflichtete Form, wie <a href="JavaScript" title="JavaScript">JavaScript</a> in <a href="Webseite" title="Webseite">Webseiten</a> eingesetzt wird. Eine einheitliche Definition des Begriffs gibt es nicht und es handelt sich insbesondere nicht um eine offizielle Norm.
</p><p>JavaScript soll demnach nicht Voraussetzung für die Funktionen einer Webseite sein, sondern den Funktionsumfang nur erweitern. Die Ansätze des <i>unobtrusive JavaScript</i> spielen vor allem für <a href="Barrierefreies_Internet" title="Barrierefreies Internet">barrierefreies</a> und <a href="Mobiles_Internet" title="Mobiles Internet">mobiles Internet</a> eine Rolle.
</p>
<div class="mw-heading mw-heading2"><h2 id="Grundprinzipien">Grundprinzipien</h2></div>
<ul><li>Abgrenzung von Inhalt, Präsentation und Verhalten von Webseiten <i>(<a href="Model_View_Controller" title="Model View Controller">Model View Controller</a>)</i><sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></li>
<li>Verwendung von <i><a href="Best_Practice" title="Best Practice">Best Practices</a>,</i> um Probleme herkömmlicher JavaScript-Programmierung zu vermeiden</li>
<li>JavaScript als Erweiterung des Funktionsumfangs, nicht als Voraussetzung<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></li></ul>
<div class="mw-heading mw-heading2"><h2 id="Motivation">Motivation</h2></div>
<p>Historisch hatte JavaScript den Ruf einer plumpen, ungeschliffenen Programmiersprache, die für „ernsthafte“ Softwareentwicklung unbrauchbar sei. Dies ist hauptsächlich auf inkonsistente Implementierungen der Skriptumgebung und des <a href="Document_Object_Model" title="Document Object Model">DOM</a> in unterschiedlichen Browsern, sowie die weitläufige Verwendung von <a href="Kopieren_und_Einf%C3%BCgen" title="Kopieren und Einfügen">Copy-&-Paste</a> bei der Programmentwicklung zurückzuführen. <a href="Laufzeitfehler" title="Laufzeitfehler">Laufzeitfehler</a> waren dermaßen üblich und schwer auszubessern, dass viele Programmierer auf Verbesserungen verzichteten, solange das Skript ungefähr das gewünschte Verhalten aufwies. In manchen Browsern war ein solches Skript gänzlich nicht lauffähig.
</p><p>Das Aufkommen von standardkompatiblen Browsern, <a href="JavaScript#JavaScript-Bibliotheken" title="JavaScript">JavaScript-Bibliotheken</a> und besseren <a href="Debugger" title="Debugger">Debugging-Werkzeugen</a> machte organisierten und skalierbaren JavaScript-Code möglich und <a href="Ajax_(Programmierung)" title="Ajax (Programmierung)">Ajax</a>-basierte Benutzeroberflächen machten dies sogar notwendig.
</p><p>Wo JavaScript früher nur für kleine, unkritische Aufgaben eingesetzt wurde, ist es nun Praxis, auch große, komplizierte Projekte zu realisieren, die oftmals Teil der Kernfunktionalität einer Webseite darstellen. Laufzeitfehler sind damit keine Unschönheiten, sondern (unter Umständen fatale) Ausfälle.
</p><p>Das Konzept der Barrierefreiheit im Sinne von JavaScript-Programmierung ist von dem Artikel <i>Unobtrusive DHTML, and the power of unordered lists</i><sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> von Stuart Langridge<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> geprägt. In diesem Artikel erörtert Langridge das Konzept, JavaScript strikt von <a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a> zu trennen. Seitdem hat er dieses Konzept in diversen Artikeln und einem Buch ausführlich dargestellt.
</p>
<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>
<ul><li><a rel="nofollow" class="external text" href="https://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript">The principles of unobtrusive JavaScript (EN)</a> auf den Seiten des <a href="World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>
<ol class="references">
<li id="cite_note-1"><span class="mw-cite-backlink"><a href="#cite_ref-1">↑</a></span> <span class="reference-text"><span class="cite">Jeremy Keith: <a rel="nofollow" class="external text" href="http://www.alistapart.com/articles/behavioralseparation"><i>Behavioral Separation.</i></a> 20. Juni 2006,<span class="Abrufdatum"> abgerufen am 6. März 2011</span>.</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AUnobtrusive+JavaScript&rft.title=Behavioral+Separation&rft.description=Behavioral+Separation&rft.identifier=&rft.creator=Jeremy%26%2332%3BKeith&rft.date=2006-06-20"> </span></span>
</li>
<li id="cite_note-2"><span class="mw-cite-backlink"><a href="#cite_ref-2">↑</a></span> <span class="reference-text"><span class="cite">Tommy Olsson: <a rel="nofollow" class="external text" href="http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/"><i>Graceful Degradation & Progressive Enhancement.</i></a> 6. Februar 2007,<span class="Abrufdatum"> abgerufen am 6. März 2011</span>.</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AUnobtrusive+JavaScript&rft.title=Graceful+Degradation+%26+Progressive+Enhancement&rft.description=Graceful+Degradation+%26+Progressive+Enhancement&rft.identifier=&rft.creator=Tommy%26%2332%3BOlsson&rft.date=2007-02-06"> </span></span>
</li>
<li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a></span> <span class="reference-text"><span class="cite">Stuart Langridge: <a rel="nofollow" class="external text" href="http://www.kryogenix.org/code/browser/aqlists/"><i>Unobtrusive DHTML, and the power of unordered lists.</i></a> November 2002,<span class="Abrufdatum"> abgerufen am 7. August 2008</span>.</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AUnobtrusive+JavaScript&rft.title=Unobtrusive+DHTML%2C+and+the+power+of+unordered+lists&rft.description=Unobtrusive+DHTML%2C+and+the+power+of+unordered+lists&rft.identifier=&rft.creator=Stuart%26%2332%3BLangridge&rft.date=2002-11"> </span></span>
</li>
<li id="cite_note-4"><span class="mw-cite-backlink"><a href="#cite_ref-4">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="http://www.netmag.co.uk/zine/dhtml-1/building-dynamic-websites"><i>Building dynamic websites.</i></a> 9. August 2006,<span class="Abrufdatum"> abgerufen am 18. Mai 2010</span>.</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AUnobtrusive+JavaScript&rft.title=Building+dynamic+websites&rft.description=Building+dynamic+websites&rft.identifier=&rft.date=2006-08-09"> </span></span>
</li>
</ol></div><!--htdig_noindex--><div><div class="zim-footer">
Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-05-11" href="https://de.wikipedia.org/wiki/?title=Unobtrusive_JavaScript&oldid=255922477">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
<script src="./_webp_/webpHandler.js"></script>
</body></html>